<template>
  <div class="app-container">
    <table-pro
      :isShowIdColumn="false"
      idColumnName="id"
      :columns="columns"
      dialog-title="合同"
      :table-request-fn="listContract"
      :create-fn="addContract"
      :update-fn="updateContract"
      :delete-fn="delContract"
      :beforeSubmitCallback="beforeSubmitCallback"
      :onReset="onReset"
      @curState="(val)=>{curState = val}"
    >
      <template #contractPayPlanList="item">
        <el-row
          v-for="(curPlan, index) in contractPayPlanList"
          style="border: 1px solid #eee; padding: 20px"
          justify="center"
          align="middle"
          type="flex"
          :key="index"
        >
          <el-col :span="20">
            <el-form
              :key="index"
              :inline="true"
              :model="contractPayPlanList[index]"
              label-width="100px"
            >
              <el-form-item label="标题：" prop="title">
                <el-input
                  v-model="contractPayPlanList[index]['title']"
                  :placeholder="`请输入标题`"
                  size="small"
                  :disabled="(curState == 1)"
                />
              </el-form-item>
              <el-form-item label="金额：" prop="payMoney">
                <el-input
                  v-model="contractPayPlanList[index]['payMoney']"
                  :placeholder="`请输入金额`"
                  size="small"
                  :disabled="(curState == 1)"
                />
              </el-form-item>
              <el-form-item label="日期：" prop="payTime">
                <el-date-picker
                  v-model="contractPayPlanList[index]['payTime']"
                  type="date"
                  :placeholder="`请输入日期`"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :disabled="(curState == 1)"
                />
              </el-form-item>
              <el-form-item label="收付款状态：" prop="state">
                <el-radio-group v-model="contractPayPlanList[index]['state']">
                  <el-radio
                    :label="radio.value"
                    :disabled="(curState == 1)"
                    v-for="(radio, index) in dict.type.conpp_state"
                    :key="index"
                    >{{ radio.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否开票：" prop="isInvoicing">
                <el-radio-group
                :disabled="(curState == 1)"
                  v-model="contractPayPlanList[index]['isInvoicing']"
                >
                  <el-radio
                    :label="radio.value"
                    v-for="(radio, index) in dict.type.contract_ticket"
                    :key="index"
                    >{{ radio.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4">
            <el-button
              v-if="index != 0"
              size="mini"
              icon="el-icon-minus"
              circle
              @click="handleDelete(index)"
            ></el-button>
            <el-button
              v-if="index == contractPayPlanList.length - 1"
              size="mini"
              icon="el-icon-plus"
              circle
              @click="handleAdd(index)"
            ></el-button>
          </el-col>
        </el-row>
      </template>
      <template #toolbarBottom>
        <el-row :gutter="20" style="margin: 20px 0px;">
          <el-col :span="3" v-for="(item, index) in countObj.slice(0, 4)" :key="index">
            <el-button
              style="pointer-events: none;width:100%"
              size="mini"
              >{{ item.name }}：{{ item.num }}</el-button
            >
          </el-col>
        </el-row>
        <el-row :gutter="20"  style="margin: 20px 0px;">
          <el-col :span="3" v-for="(item, index) in countObj.slice(4)" :key="index">
            <el-button
              :key="index"
              style="pointer-events: none;width:100%"
              size="mini"
              >{{ item.name }}：{{ item.num }}</el-button
            >
          </el-col>
        </el-row>
      </template>
    </table-pro>

    <el-dialog title="历史记录" :visible.sync="historyOpen" width="80%">
      <el-table v-loading="loading" :data="historyList" align="center">
        <el-table-column label="合同金额" prop="money">
          <template #default="scope">
            <div v-if="scope.row.money">
              <div>变更前：{{ scope.row.oldMoney }}</div>
              <div>变更后：{{ scope.row.money }}</div>
            </div>
            <div v-else>该项无修改</div>
          </template>
        </el-table-column>

        <el-table-column label="合同状态" prop="states"
          ><template #default="scope">
            <div v-if="scope.row.state">
              <div style="margin-bottom: 5px">
                变更前：
                <dict-tag
                  style="display: inline"
                  :options="dict.type.con_states"
                  :value="scope.row.oldState"
                />
              </div>
              <div>
                变更后：<dict-tag
                  style="display: inline"
                  :options="dict.type.con_states"
                  :value="scope.row.state"
                />
              </div>
            </div>
            <div v-else>该项无修改</div>
          </template>
        </el-table-column>

        <el-table-column label="备注" prop="remark">
          <template #default="scope">
            <div v-if="scope.row.remark">
              <div>变更前：{{ scope.row.oldRemark }}</div>
              <div>变更后：{{ scope.row.remark }}</div>
            </div>
            <div v-else>该项无修改</div>
          </template>
        </el-table-column>
        <el-table-column prop="annex" label="附件" width="300">
          <template #default="scope">
            <div v-if="scope.row.annex">
              <div>
                变更前：
                <el-link type="primary" v-for="(cur,index) in scope.row.oldAnnex.split(',')" :key="index" :href="cur" target="_blank">{{ cur }}</el-link>
              </div>
              <div>
                变更后：
                <el-link type="primary" v-for="(cur,index) in scope.row.annex.split(',')"  :key="index"  :href="cur" target="_blank">{{cur}}</el-link>
              </div>
            </div>
            <div v-else>该项无修改</div>
          </template>
        </el-table-column>

        <el-table-column label="变更时间" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getHistoryList"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  listContract,
  getContract,
  addContract,
  updateContract,
  delContract,
  getContractHistory,
  getContractCountTwo,
  getContractCount,
} from "@/api/contract/index.js";
const planItem = {
  title: "",
  money: "",
  date: "",
  conpp_state: "",
  contract_ticket: "",
};
export default {
  name: "ContractList",
  dicts: [
    "con_type",
    "con_pay_type",
    "con_is_change",
    "con_states",
    "conpp_state",
    "contract_ticket",
  ],
  data() {
    return {
      loading: true,
      curState:1,//1详情2更新3新增
      historyOpen: false,
      total: 0,
      curId: undefined,
      historyList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      contractPayPlanList: [{ ...planItem }],
      countObj: [
        {
          name: "预计收入",
          num: 0,
        },
        {
          name: "预计支出",
          num: 0,
        },
        {
          name: "实际收入",
          num: 0,
        },
        {
          name: "实际支出",
          num: 0,
        },
        {
          name: "收入合同总金额",
          num: 0,
        },
        {
          name: "已回款",
          num: 0,
        },
        {
          name: "未回款",
          num: 0,
        },
        {
          name: "已开票",
          num: 0,
        },
        {
          name: "支出合同总金额",
          num: 0,
        },
        {
          name: "已付款",
          num: 0,
        },
        {
          name: "未付款",
          num: 0,
        },
        {
          name: "已收票",
          num: 0,
        },
      ],
    };
  },
  computed: {
    columns() {
      return [
        {
          title: "合同名称",
          field: "name",
          add: [{ required: true, message: "请输入" }],
          search: true,
          disabled: true,
        },

        {
          title: "合同类型",
          field: "type",
          add: [{ required: true, message: "请输入" }],
          search: true,
          type: "select",
          options: this.dict.type.con_type,
          disabled: true,
        },
        {
          title: "收付类型",
          field: "payType",
          add: [{ required: true, message: "请输入" }],
          type: "select",
          options: this.dict.type.con_pay_type,
          disabled: true,
        },
        {
          title: "甲方",
          field: "partyA",
          add: [{ required: true, message: "请输入" }],
          disabled: true,
          hidden: true,
        },
        {
          title: "乙方",
          field: "partyB",
          add: [{ required: true, message: "请输入" }],
          disabled: true,
          hidden: true,
        },
        {
          title: "丙方",
          field: "partyC",
          add: true,
          disabled: true,
          hidden: true,
        },
        {
          title: "合同编号",
          field: "numberId",
          add: [{ required: true, message: "请输入" }],
          add: true,
          disabled: true,
          hidden: true,
        },

        {
          title: "签订时间",
          field: "signingTime",
          type: "date",
          add: true,
          disabled: true,
        },
        {
          title: "到期时间",
          field: "expireTime",
          type: "date",
          add: true,
          hidden: true,
        },
        {
          title: "合同金额",
          field: "money",
          add: true,
        },
        {
          title: "合同状态",
          field: "states",
          add: true,
          search: true,
          type: "select",
          options: this.dict.type.con_states,
        },
        {
          title: "对方联系人",
          field: "partyName",
          add: true,
          hidden: true,
        },
        {
          title: "联系方式",
          field: "partyPhone",
          add: true,
          hidden: true,
        },
        {
          title: "备注",
          field: "remark",
          add: true,
          formProps: { type: "textarea" },
          hidden: true,
        },
        {
          title: "收/付款计划",
          field: "contractPayPlanList",
          add: true,
          formSlot: "contractPayPlanList",
          hidden: true,
        },
        // {
        //   title: "附件",
        //   field: "annex",
        //   add: true,
        //   type: "img",
        //   hidden: true,
        //   render: (item) => {
        //     if (item.annex) {
        //       return item.annex.split(",");
        //     } else {
        //       return [];
        //     }
        //   },
        // },
        {
          title: "附件",
          field: "annex",
          add: true,
          type: "file",
          hidden: true,
        },
        {
          actions: [
            { type: "edit", beforeCallback: this.beforeEditCallback },
            { type: "delete" },
            { type: "detail", beforeCallback: this.beforeEditCallback },
            {
              type: "custom",
              text: "历史",
              filter: (row) => row.isChange == "2",
              click: this.handleHistory,
            },
          ],
        },
      ];
    },
  },
  created() {
    getContractCount().then((res)=>{
      this.countObj[0].num = res.data.planInMoney
      this.countObj[1].num = res.data.planOutMoney
      this.countObj[2].num = res.data.realInMoney
      this.countObj[3].num = res.data.realOutMoney
    })
    getContractCountTwo().then((res)=>{
      this.countObj[5].num = res.data.inContractCountMoney
      this.countObj[6].num = res.data.alreadyInMoney
      this.countObj[7].num = res.data.notInMoney
      this.countObj[8].num = res.data.alreadyOpenBill
      this.countObj[9].num = res.data.outContractCountMoney
      this.countObj[10].num = res.data.alreadyPay
      this.countObj[11].num = res.data.notPay
      this.countObj[12].num = res.data.alreadyInBill
    })
  },
  methods: {
    listContract: listContract,
    getContract: getContract,
    addContract: addContract,
    updateContract: updateContract,
    delContract: delContract,
    handleHistory(row) {
      console.log(row);
      this.curId = row.id;
      this.historyOpen = true;
      this.getHistoryList();
    },
    getHistoryList() {
      getContractHistory({ ...this.queryParams, contractId: this.curId }).then(
        (data) => {
          this.historyList = data.rows;
          this.total = data.total;
          this.loading = false;
        }
      );
    },
    handleDelete(index) {
      this.contractPayPlanList.splice(index, 1);
    },
    handleAdd(index) {
      this.contractPayPlanList = [...this.contractPayPlanList, { ...planItem }];
    },
    beforeSubmitCallback(form) {
      form.contractPayPlanList = this.contractPayPlanList;
      return form;
    },
    beforeEditCallback(item) {
      this.contractPayPlanList = item.contractPayPlanList || [{ ...planItem }];
      return item;
    },
    onReset() {
      this.contractPayPlanList = [{ ...planItem }];
    },
  },
};
</script>
